 <gm:page title="Demo - Single-item pager" authenticate="true" onload="init()">

  <script>
    var current;
    var myList;
    var myItem;
    
    function init() {
      current = -1;
      myList = google.mashups.getObjectById("myList");
      myItem = google.mashups.getObjectById("myItem");
    }
    
    function next() {
      current++;  
      if (current >= myList.getData().size())
        current = 0;
      
      myItem.setEntry(myList.getData().entryAt(current));
    }
  </script>
    
  <h1>Demo - Single-item pager</h1>
  
  <h4>All entries</h4>
  <gm:list id="myList" data="${app}/myList" template="simple"/>
  
  <p/>
  
  <h4 style="display:inline">Selected entry</h4> 
  <input type="button" value="Next &gt; &gt;" onclick="next()"/><br/>
  <gm:item id="myItem"/>
  
  <gm:template id="myTemplate">
    <table border="1">
      <tr repeat="true">
        <td><gm:text ref="atom:title"/></td>
        <td><gm:editButtons/></td>
      </tr>
    </table>
    <gm:create label="New"/>
  </gm:template>

</gm:page>
